<template>
  <div>
    <el-row>
      <el-table
        :data="renderData"
        border
        style="width: 100%"
        :header-cell-style="{ background: '#606266', color: '#fff' }"
      >
        <el-table-column
          type="index"
          label="序号"
          width="80"
          align="center"
        >
          <template slot-scope="scope">
            <span
              v-if="scope.row.id == ''"
              style="color: red"
              >*</span
            >
            <span v-else>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="lineType"
          label="线别"
          align="center"
          width="180"
          ><template slot-scope="scope">
            <span v-if="scope.row.lineType !== ''">
              <span v-if="scope.row.lineType == '0'">左右线</span>
              <span v-else-if="scope.row.lineType == '1'">左线</span>
              <span v-else-if="scope.row.lineType == '2'">右线</span>
              <span v-else>{{ scope.row.lineType }}</span>
            </span>
            <el-select
              v-else
              v-model="lineTypeInput"
              placeholder="请选择"
            >
              <el-option
                v-for="item in lineTypeOptions"
                :key="item.id"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select> </template
        ></el-table-column>
        <el-table-column
          label="中心里程"
          align="center"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.id !== ''">
              <p>
                DK
                {{ scope.row.mileageKm == null ? '--' : scope.row.mileageKm }} +
                {{ scope.row.mileageM == null ? '--' : scope.row.mileageM }}
              </p>
            </div>
            <div v-else>
              <div
                style="display: flex; align-items: center; margin-bottom: 5px"
              >
                DK
                <el-input
                  style="width: 40%"
                  v-model="mileageKmInput"
                  size="mini"
                  placeholder="千米"
                ></el-input>
                +
                <el-input
                  style="width: 40%"
                  v-model="mileageMInput"
                  size="mini"
                  placeholder="米"
                ></el-input>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="topSpeed"
          label="最高时速"
          align="center"
          width="180"
          ><template slot-scope="scope">
            <span v-if="scope.row.id !== ''">{{ scope.row.topSpeed }}Km/h</span>
            <el-input
              v-else
              v-model="topSpeedInput"
              placeholder="Km/h"
            ></el-input> </template
        ></el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
          align="center"
          ><template slot-scope="scope">
            <span v-if="scope.row.id !== ''">{{ scope.row.remark }}</span>
            <el-input
              v-else
              v-model="remarkInput"
              type="textarea"
              resize="none"
              :rows="1"
              placeholder="请输入内容"
            ></el-input></template
        ></el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="100"
        >
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.id"
              type="text"
              style="color: red"
              @click="deleteHandler(scope.row.id)"
              >删除</el-button
            >
            <el-button
              v-else
              type="text"
              @click="saveHandler(scope.row)"
              >确定</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row style="position: absolute; right: 50px">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-row>
  </div>
</template>

<script>
import {
  getSwitchSet,
  switchSetDetail,
  saveSwitchSet,
  updateSwitchSet,
  deleteSwitchSet,
} from '/src/http/productSchedule/turnoutSet.js'
import { autoClick } from '/src/utils/autoClick.js'
import { getDataType } from '/src/http/dictionary.js'
export default {
  data() {
    return {
      lineTypeInput: '',
      mileageKmInput: '',
      mileageMInput: '',
      topSpeedInput: '',
      remarkInput: '',
      lineTypeOptions: [],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      renderData: [],
    }
  },

  mounted() {
    this.getSwitchSetApi()
    this.getDataTypeApi()
  },

  methods: {
    handleSizeChange(v) {
      this.pageSize = v
      this.getSwitchSetApi(this.currentPage, v)
    },

    handleCurrentChange(v) {
      this.currentPage = v
      this.getSwitchSetApi(v, this.pageSize)
    },

    saveHandler(v) {
      if (
        this.lineTypeInput == '' ||
        this.mileageKmInput == '' ||
        this.mileageMInput == '' ||
        this.topSpeedInput == '' ||
        this.remarkInput == ''
      ) {
        this.$message.error('请将信息填写完整')
      } else {
        let params = {
          lineType: this.lineTypeInput,
          mileageKm: Number(this.mileageKmInput),
          mileageM: Number(this.mileageMInput),
          topSpeed: Number(this.topSpeedInput),
          remark: this.remarkInput,
        }
        this.saveSwitchSetApi(params)
      }
      this.lineTypeInput = ''
      this.mileageKmInput = ''
      this.mileageMInput = ''
      this.topSpeedInput = ''
      this.remarkInput = ''
    },

    deleteHandler(v) {
      this.$confirm('此操作将永久删除该信息?', '提示', {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.deleteSwitchSetApi({ idList: [v] })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
      autoClick()
    },

    getDataTypeApi() {
      getDataType({ type: 'ht_line_type' }).then((res) => {
        if (res.code == 200) {
          this.lineTypeOptions = res.data
        }
      })
    },

    getSwitchSetApi(pageNum = 1, pageSize = 10) {
      let params = { pageNum, pageSize }
      getSwitchSet(params).then((res) => {
        if (res.code == 200) {
          this.renderData = res.data.records
          this.total = res.data.total

          if (res.data.records.length >= this.pageSize) return

          this.renderData.push({
            id: '',
            lineType: '',
            mileageKm: null,
            mileageM: null,
            topSpeed: null,
            remark: '',
          })
        }
      })
    },

    switchSetDetailApi(params) {
      switchSetDetail(params).then((res) => {
        if (res.code == 200) {
          console.log('res::: ', res)
        }
      })
    },

    saveSwitchSetApi(params) {
      saveSwitchSet(params).then((res) => {
        if (res.code == 200) {
          this.$message.success('保存成功')
          let pgn =
            Number.isInteger(this.total / this.pageSize) == true
              ? this.total / this.pageSize + 1
              : Math.ceil(this.total / this.pageSize)
          this.getSwitchSetApi(pgn, this.pageSize)
          this.currentPage = pgn
        } else {
          this.$message.error(res.message)
        }
      })
    },

    updateSwitchSetApi(params) {
      updateSwitchSet(params).then((res) => {
        if (res.code == 200) {
          console.log('res::: ', res)
        }
      })
    },

    deleteSwitchSetApi(params) {
      deleteSwitchSet(params).then((res) => {
        if (res.code == 200) {
          this.$message.success('删除成功')
          if (this.renderData.length == 1 && this.total / this.pageSize > 1) {
            this.getSwitchSetApi(this.currentPage - 1, this.pageSize)
            this.currentPage = this.currentPage - 1
          } else {
            this.getSwitchSetApi(this.currentPage, this.pageSize)
          }
        } else {
          this.$message.error(res.message)
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
:deep(.el-input__inner) {
  border: none;
  background-color: rgba(255, 255, 255, 0);
}
:deep(.el-textarea__inner) {
  border: none !important;
  background-color: rgba(255, 255, 255, 0);
  resize: none;
}
</style>
